<template>
 <div class="detail fix">
   <!--<div class="navBar">-->
     <!--<div class="back" @click="prevPage">-->
       <!--<span class="iconfont icon-Left returnPrev"></span>-->
       <!--<span class="returnPrev">返回</span>-->
     <!--</div>-->
     <!--<div class="pageName">-->
       <!--产品详情-->
     <!--</div>-->
     <!--<span></span>-->
   <!--</div>-->

   <div class="backPrev" @click="prevPage">
     <span class="iconfont icon-Left returnPrev"></span>
   </div>

   <div v-if="isReturnTopShow" class="backPrev backTop" @click="pageTop">
     <span class="iconfont icon-top returnPrev"></span>
   </div>

   <div class="backPrev backHome" @click="returnIndex">
     <span class="iconfont icon-ybbindex returnPrev"></span>
   </div>

   <div class="scroll-continer" ref="scrollContainer">
     <div class="swiper">
       <swiper :list="imgList"
               :auto='true'
               height="250px"
               :loop = 'true'
       ></swiper>
     </div>

     <div class="desc">
       <div class="price-box">
         <span>￥</span><span class="price">9999</span>
       </div>
       <div class="title">
         Panasonic/松下 SR-TC157YA日本智能IH饭煲家用电饭锅3-4-5-6人4L
       </div>
       <div class="sub-title">
         4L IH立体加热；大火力不溢锅
       </div>
       <div class="stock-box clearfix">
         <p class="stock">库存：999</p>
         <p class="sale">销量：999</p>
       </div>
     </div>

     <div class="spec" @click="showDialog">
       <span>产品参数</span>
       <span class="iconfont icon-Left"></span>
     </div>

     <div class="company">
       <div>
         <img src="../../assets/images/product.jpg" alt="">
         <span>青岛鑫和广业家电有限公司</span>
       </div>
       <router-link to="/products/0">全部产品</router-link>
     </div>

     <div class="tips">
       <span class="line"></span>
       <span class="iconfont icon-picture"></span>
       <span>详情</span>
       <span class="line"></span>
     </div>

     <div class="tips">
       <span class="line"></span>
       <span class="iconfont icon-womenchengnuo"></span>
       <span>服务承诺</span>
       <span class="line"></span>
     </div>
   </div>

   <div :class="isShowDialog?'active mask':'mask'" @click="isShowDialog=false"></div>
   <div :class="isShowDialog?'active dialog':'dialog'">
     <div :class="isShowDialog?'active content':'content'">
       <div class="title">产品参数</div>
       <ul>
         <li><span class="spec-name">产品型号</span><span class="spec-desc">333</span></li>
         <li><span class="spec-name">111</span><span class="spec-desc">333</span></li>
         <li><span class="spec-name">111</span><span class="spec-desc">333</span></li>
         <li><span class="spec-name">111</span><span class="spec-desc">333</span></li>
         <li><span class="spec-name">111</span><span class="spec-desc">333</span></li>
         <li><span class="spec-name">111</span><span class="spec-desc">333</span></li>
       </ul>

       <div class="btn-box">
         <button @click="isShowDialog=false">完成</button>
       </div>
     </div>
   </div>

 </div>
</template>

<script>
import { Swiper, XButton } from 'vux'
import { getProductDetails } from '../../api/details'

export default {
  name: 'Detail',
  components: {
    Swiper,
    XButton
  },
  data () {
    return {
      imgList: [{
        url: 'javascript:',
        img: require('../../assets/images/banner.jpg')
      }, {
        url: 'javascript:',
        img: require('../../assets/images/banner.jpg')
      }, {
        url: 'javascript:',
        img: require('../../assets/images/banner.jpg')
      }, {
        url: 'javascript:',
        img: require('../../assets/images/banner.jpg')
      }, {
        url: 'javascript:',
        img: require('../../assets/images/banner.jpg')
      }],
      isShowDialog: false,
      isReturnTopShow: false,
      box: null,
      product_id: null
    }
  },
  created () {
    this.product_id = this.$route.params.productId
    console.log(this.product_id)
    this.getDetails(this.product_id)
  },
  methods: {
    getDetails (id) {
      getProductDetails(id).then(res => {
        console.log(res)
      })
    },
    prevPage () {
      this.$router.go(-1)
    },
    showDialog (e) {
      // e.preventDefault()
      // alert(1)
      this.isShowDialog = true
    },
    pageTop () {
      // this.box.scrollTop = 0
      var scrolling = setInterval(() => {
        this.box.scrollTop -= 10
        if (this.box.scrollTop <= 0) {
          clearInterval(scrolling)
          scrolling = null
        }
      }, 5)
    },
    returnIndex () {
      this.$router.push('/category')
    }
  },
  mounted () {
    this.box = this.$refs.scrollContainer
    this.box.addEventListener('scroll', () => {
      console.log('scroll' + this.$refs.scrollContainer.scrollTop)
      console.log(window.innerHeight)
      this.isReturnTopShow = this.box.scrollTop > window.innerHeight / 2
    })
  }
}
</script>

<style lang="less">
  .vux-slider > .vux-indicator > a > .vux-icon-dot.active,
  .vux-slider .vux-indicator-right > a > .vux-icon-dot.active {
    background-color: #FF6B01!important;
  }
</style>

<style lang="less" scoped>
  .detail {
    background-color: #f0f0f0;
    height: 100vh;
    overflow: hidden;
    position: relative;
    .scroll-continer {
      height: 100vh;
      overflow: scroll;
      &::-webkit-scrollbar {
        display: none;
      }
      .swiper {
        /*margin-top: 45px;*/
      }
      .desc {
        margin-bottom: 10px;
        background-color: #fff;
        padding: 10px;
        box-sizing: border-box;
        .price-box {
          /*margin-bottom: 5px;*/
          color: #FF6B01;
          font-size: 14px;
          .price {
            font-size: 20px;
            margin-left: 3px;
          }
        }
        .title {
          font-size: 16px;
          font-weight: 600;
          line-height: 25px;
          max-height: 50px;
          overflow: hidden;
          margin-bottom: 5px;
        }
        .sub-title {
          font-size: 14px;
          color: #FF6B01;
          margin-bottom: 5px;
        }
        .stock-box {
          color: #797979;
          font-size: 13px;
          .stock {
            float: left;
          }
          .sale {
            width: 100px;
            margin: 0 auto;
            text-align: center;
          }
        }
      }
      .spec {
        height: 48px;
        background-color: #fff;
        font-size: 13px;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        margin-bottom: 10px;
        .icon-Left {
          font-size: 14px;
          -webkit-transform: rotate(180deg);
          -moz-transform: rotate(180deg);
          -ms-transform: rotate(180deg);
          -o-transform: rotate(180deg);
          transform: rotate(180deg);
        }
      }
      .company {
        height: 68px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        background-color: #fff;
        &>div {
          display: flex;
          align-items: center;
          img {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            margin-right: 8px;
          }
          span {
            font-size: 13px;
          }
        }
        a {
          color: #FF6B01;
          font-size: 12px;
          padding: 0 10px;
          border: 1px solid #FF6B01;
          border-radius: 15px;
        }
      }
      .tips {
        padding: 8px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        .line {
          height: 1px;
          width: 50px;
          background-color: #bfbfbf;
        }
        span:nth-child(2) {
           color: #aaa;
           font-size: 16px;
           margin-left: 10px;
        }
        span:nth-child(3) {
          color: #aaa;
          font-size: 13px;
          margin-left: 3px;
          margin-right: 10px;
        }
      }
    }
    .mask {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      opacity: 0;
      background-color: rgba(0, 0, 0, .3);
      z-index: -10;
      -webkit-transition: all linear .3s;
      -moz-transition: all linear .3s;
      -ms-transition: all linear .3s;
      -o-transition: all linear .3s;
      transition: all linear .3s;
      &.active {
        opacity: 1;
        z-index: 10;
      }
    }
    .dialog {
      position: absolute;
      top: 20%;
      left: 0;
      right: 0;
      bottom: 0;
      z-index:11;
      -webkit-transform: translateY(100%);
      -moz-transform: translateY(100%);
      -ms-transform: translateY(100%);
      -o-transform: translateY(100%);
      transform: translateY(100%);
      /*display: none;*/
      -webkit-transition: transform linear .3s;
      -moz-transition: transform linear .3s;
      -ms-transition: transform linear .3s;
      -o-transition: transform linear .3s;
      transition: transform linear .3s;
      /*background-color: rgba(0,0,0,.3);*/
      &.active {
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0);
      }
      .content {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        overflow: hidden;
        .title {
          height: 8%;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 16px;
        }
        .btn-box {
          height: 8%;
          display: flex;
          align-items: center;
          justify-content: center;
          button {
            width:94%;
            height: 78%;
            border: none;
            outline: none;
            background-color: #FF6B01;
            border-radius: 20px;
            color: #fff;
            font-size: 16px;
          }
        }
        ul {
          height: 84%;
          overflow: scroll;
          padding: 0 10px;
          &::-webkit-scrollbar {
            display: none;
          }
          li {
            height: 50px;
            border-bottom: 1px solid #e9e9e9;
            display: flex;
            align-items: center;

            font-size: 14px;
            span:first-child {
              color: #797979;
              width: 80px;
            }
            span:last-child {
              color: #333;
            }
          }
        }
      }
    }
  }
</style>
